<!--
 * @Description: 用于展示模板
 * @Version: 1.0
 * @Autor: chen_yt
 * @Date: 2021-04-28 15:22:00
 * @LastEditors: zhong_m
 * @LastEditTime: 2022-02-15 15:41:38
-->
<template>
  <div class="new-template">
    <fks-dialog
      v-if="Visible"
      :visible.sync="Visible"
      :append-to-body="true"
      width="960px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="close"
    >
      <template slot="title">
        <i :class="iconClass" />
        <span>{{ dialogTitle }}</span>
      </template>

      <div
        v-loading="loading < 2"
        class="template"
      >
        <div class="template-information">
          <fks-form
            ref="Form"
            :model="Form"
            label-width="84px"
          >
            <fks-form-item
              :span="12"
              prop="name"
              :label="LANG.NAME"
            >
              <fks-input
                v-model="Form.name"
                maxlength="50"
                show-word-limit
                read-only
              />
            </fks-form-item>
            <fks-form-item
              :span="12"
              prop="description"
              :label="LANG.DESCRIPTION"
            >
              <fks-input
                v-model="Form.description"
                maxlength="50"
                show-word-limit
                read-only
              />
            </fks-form-item>

            <!-- 展示模板已选字段 -->
            <fks-form-item
              :span="24"
              :label="LANG.TEMPLATE_PARAMS"
            >
              <fks-table
                width="100%"
                style="height: 100%"
                :data="detailTable"
                max-height="400px"
              >
                <fks-table-column
                  label="#"
                  width="55"
                  fixed="left"
                >
                  <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                  </template>
                </fks-table-column>
                <fks-table-column
                  width="320"
                  :label="LANG.FIELD_NAME"
                  prop="fieldName"
                  header-align="center"
                  align="left"
                />
                <fks-table-column
                  align="left"
                  :label="LANG.FIELD_SHOW_NAME"
                >
                  <template slot-scope="scope">
                    <span> {{ scope.row.alias }}</span>
                  </template>
                </fks-table-column>
                <fks-table-column
                  :label="LANG.SHOW_ON_LIST"
                  width="120"
                >
                  <template slot-scope="scope">
                    <fks-switch
                      v-model="scope.row.isReveal"
                      active-value="1"
                      inactive-value="0"
                      disabled
                    />
                  </template>
                </fks-table-column>
              </fks-table>
            </fks-form-item>

            <!-- 使用该模板的的分类目录表 -->
            <fks-form-item
              :span="24"
              :label="LANG.CATEGORY_IN_USE"
              style="margin-bottom: 0"
            >
              <fks-table
                width="100%"
                style="height: 100%"
                :data="categoryTable"
                max-height="400px"
              >
                <fks-table-column
                  label="#"
                  width="55"
                  fixed="left"
                >
                  <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                  </template>
                </fks-table-column>
                <fks-table-column
                  width="320"
                  :label="LANG.CATEGORY_ID"
                  prop="id"
                  header-align="center"
                  align="left"
                />
                <fks-table-column
                  :label="LANG.CATEGORY_NAME"
                  prop="categoryName"
                  header-align="center"
                  align="left"
                />
              </fks-table>
            </fks-form-item>
          </fks-form>
        </div>
      </div>

      <template slot="footer">
        <span />
      </template>
    </fks-dialog>
  </div>
</template>

<script>
import { defaultField } from '@/modules/Content/defaultData'
import {
  getTemplateDetailById,
  getCategoryByTemplateId
} from '@/modules/Content/api'
import * as types from '@/store/Getter/getterTypes.js'
export default {
  name: 'EditTemplate',
  components: {},
  props: {
    visible: {
      type: Boolean
    },
    operateType: {
      type: String,
      default: 'new'
    },
    item: {
      type: Object
    }
  },
  data() {
    return {
      loading: 0,
      Visible: false,
      select_field_visible: false,
      Form: {}, //展示模板基础信息的表单（名字、备注）
      templateId: String,
      detailTable: [], //展示的模板字段
      categoryTable: [] //正在使用该模板的目录
    }
  },
  computed: {
    dialogTitle() {
      return this.LANG.VIEW
    },
    iconClass() {
      return 'fks-icon-view'
    }
  },
  watch: {
    visible(val) {
      this.Visible = val
      if (val) {
        this.resetData()
        this.initData()
      }
    }
  },
  methods: {
    close() {
      this.resetData()
      this.$emit('close')
    },

    /**
     * @description: 获得模板的所有字段，置入detailTable进行展示
     * @param {String} id 模板id
     */
    getTemplateDetailListById(id) {
      return getTemplateDetailById(id)
        .then((res) => {
          if (res.status) {
            this.detailTable = res.data
              ? JSON.parse(JSON.stringify(res.data))
              : []
            this.detailTable.forEach((item) => {
              for (let i = 0; i < defaultField.length; i++) {
                if (defaultField[i].fieldName == item.fieldName) {
                  item.canDel = defaultField[i].canDel
                }
              }
            })
          }
          this.loading++
        })
        .catch(() => {})
    },

    /**
     * @description:获得所有正在使用该模板的分类目录
     * @param {*} id 模板id
     */
    getCategoryByTemplateId(id) {
      return getCategoryByTemplateId(id)
        .then((res) => {
          if (res.status) {
            this.categoryTable = res.data
              ? JSON.parse(JSON.stringify(res.data))
              : []
          }
          this.loading++
        })
        .catch(() => {})
    },

    initData() {
      this.loading = 0
      this.Form = {
        name: this.item.title,
        description: this.item.description
      }
      this.templateId = this.item.id
      this.getTemplateDetailListById(this.templateId)
      this.getCategoryByTemplateId(this.templateId)
    },

    resetData() {
      this.Form = {}
      this.templateId = ''
      this.detailTable = []
      this.categoryTable = []
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .fks-dialog__body {
  padding-top: 16px;
  padding-bottom: 0;
  margin-top: 8px;
}
</style>